<script>
/* 
    上传一张图片页面
 */
import { defineComponent } from 'vue'
export default defineComponent({
	name: 'UploadList'
})
</script>
<script setup>
import { ref, defineExpose } from 'vue'
import { baseConfig } from '@/config'
import { useAuth } from '@/hooks'
const { state } = useAuth()
// confi为index.js里面的根路径
const isRefresh = ref(true)
const url = ref('/wework/media/uploadfile')
let headers = {
	UserToken: state.token
	// 'UserToken': '1f391c6c-51d9-11ed-8dd2-00163e2292ca',
}
const props = defineProps({
	imgurl: {
		type: String,
		default: ''
	},
	text: {
		type: String,
		default: ''
	},
	uploadType: {
		type: Object,
		default: {
			type: 'image',
			multiple: false,
			num: 0
		}
	},
	imgList: {
		type: Array,
		default: []
	}
})
const urldata = ref(props.imgurl)
const handleSuccess = (res, uploadFile) => {
	urldata.value = res.data.url
	// imgurlRef.value = URL.createObjectURL(uploadFile.raw)
	console.log(res.data, '上传成功后的urlstring')

	emits('getImg', res.data)
}

const beforeUpload = (rawFile) => {
	console.log(rawFile)
	if (props.uploadType.type === 'image') {
		if (props.uploadType.multiple) {
			if (props.imgList.length >= props.uploadType.num) {
				ElMessage.error(`图片上传数量不能超过${props.uploadType.num}张`)
				return false
			} else {
				if (rawFile.type.indexOf('image') == -1) {
					ElMessage.error('请上传图片')
					return false
				} else if (rawFile.size / 1024 / 1024 > 10) {
					ElMessage.error(' 图片大小不能超过10M!')
					return false
				}
			}
		} else {
			if (rawFile.type.indexOf('') == -1) {
				ElMessage.error('请上传图片')
				return false
			} else if (rawFile.size / 1024 / 1024 > 10) {
				ElMessage.error(' 图片大小不能超过10M!')
				return false
			}
		}
	} else {
		if (rawFile.type !== 'video/mp4') {
			ElMessage.error('请上传视频')
			return false
		} else if (rawFile.size / 1024 / 1024 > 10) {
			ElMessage.error(' 视频大小不能超过10M!')
			return false
		}
	}

	return true
}
const emits = defineEmits(['getImg'])
</script>
<template>
	<div>
		<el-upload
			class="uploader"
			name="file"
			:action="url"
			:headers="headers"
			:show-file-list="false"
			:on-success="handleSuccess"
			:before-upload="beforeUpload"
		>
			<img
				v-if="!props.uploadType.multiple && props.uploadType.type === 'image' && urldata"
				:src="urldata"
				class="upload-img"
			/>
			<!-- <i v-else class="upload-icon el-icon-plus"></i> -->

			<div
				v-if="(!props.uploadType.multiple && !urldata) || props.uploadType.multiple || props.uploadType.type == 'video'"
				class="upload-icon"
			>
				<el-icon>
					<Plus />
				</el-icon>
				<p v-if="text != ''" style="margin-top: 15px">{{ text }}</p>
			</div>
		</el-upload>
	</div>
</template>
<style lang="scss" scoped>
:deep(.uploader .el-upload) {
	border: 1px dashed #d9d9d9;
	border-radius: 6px;
	cursor: pointer;
	position: relative;
	overflow: hidden;
}

:deep(.uploader .el-upload:hover) {
	border-color: #409eff;
}
.upload-icon {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	font-size: 28px;
	color: #8c939d;
	width: 120px;
	height: 120px;
	text-align: center;
}
.upload-icon p {
	font-size: 14px;
	text-align: center;
}
.upload-img {
	width: 120px;
	height: 120px;
	display: block;
}
</style>
